<template>
  <v-app :style="{background:$vuetify.theme.themes.dark.background}">
    <SideBar :drawer="drawer"></SideBar>
    <RightSideBar></RightSideBar>
    <v-container>
      <v-toolbar flat color="transparent">
        <v-btn icon dark class="d-ld-none d-xl-flex" @click.stop="drawer =!drawer">
          <v-icon>mdi-menu</v-icon>
        </v-btn>
        <v-spacer></v-spacer>
        <v-text-field label="Search on maufarm" class="pt-5 d-done d-sm-flex" dark filled prepend-inner-icon="mdi-magnify" solo flat background-color="transparent" rounded outlined> </v-text-field>
        <v-spacer></v-spacer>
        <v-btn dark class="mr-2">
          <v-icon left> fas fa-filter</v-icon>Filter
        </v-btn>
        <v-btn dark class="mr-2">
          <v-icon left> fas fa-upload</v-icon>Export
        </v-btn>
      </v-toolbar>
      <h1 class="white--text">SALES</h1>
      <p class="white--text">A Great Way To Generate All The Motivation You Need To Get Fit</p>
      <v-app-bar dark color="transparent" flat>
        <v-tabs color="#6f0dff">
          <v-tabs-slider color="#6f0dff"></v-tabs-slider>
          <v-tab class="withoutupercase">Fultillment Status Views</v-tab>
          <v-tab class="withoutupercase">Real-time Tracking</v-tab>
          <v-tab class="withoutupercase">Sales View</v-tab>
          <v-tab class="withoutupercase">Balance</v-tab>
          <v-tab class="withoutupercase">Transactions</v-tab>
           <v-tab class="withoutupercase">Engagement Rate</v-tab>
        </v-tabs>
        <v-spacer></v-spacer>
        <v-btn dark text class='d-none d-sm-flex'>
          <v-icon left>mdi-magnify</v-icon>SEARCHA
        </v-btn >
        <v-btn rounded color="white" class="black--text">
          List
          <v-icon>mdi-format-list-bulleted</v-icon>
        </v-btn>
        <v-btn icon>
          <v-icon>mdi-apps</v-icon>
        </v-btn>
      </v-app-bar>
      <v-divider color="grey"></v-divider>
      <v-toolbar flat color="transparent">
        <v-divider vertical color="green" inset></v-divider>
        <v-toolbar-title class="white--text ml-4">Alert</v-toolbar-title>
         <v-spacer></v-spacer>
         <v-chip class="ma-1 d-done d-sm-flex" label text-color="white" dark>
           <v-avatar color="white" rounded class="mr-2">
             <v-img src="../assets/1.jpg" contain></v-img>
           </v-avatar>
           Nike new golf
         </v-chip>
        <v-chip class="ma-1 d-done d-sm-flex" label text-color="white" dark>
           <v-avatar color="white" rounded class="mr-2">
             <v-img src="../assets/2.jpg" contain></v-img>
           </v-avatar>
           Sneakers printemps
         </v-chip>
         <v-spacer></v-spacer>
         <v-btn dark class="mr-2 withoutupercase d-done d-sm-flex">See All (10)</v-btn>
         <v-btn dark class="mr-2" outlined>
           <v-icon left>mdi-chevron-left</v-icon>
           <v-icon right>mdi-chevron-right</v-icon>
         </v-btn>
      </v-toolbar>
      <v-row class="mt-n14">
        <v-col cols="12" xs="12" md="4" lg="3" v-for="(shoe,i) in shoes" :key="i">
          <v-card class="mx-auto mt-12 rounded-xl" max-width="374" color="#151515">
            <v-img height="170" :src="shoe.image"></v-img>
            <v-toolbar color="transparent" class="mt-n7" flat>
              <v-avatar color="white" rounded class="mr-2">
                <v-img :src="shoe.pic" contain></v-img>
              </v-avatar>
              <v-spacer></v-spacer>
              <v-avatar color="black" rounded class="mr-2" dark>
                  <div class="three">
                    <div class="four">
                      <span class="white--text caption">{{shoe.price}}</span>
                    </div>
                    <div class="five"><span class="green--text caption">HOLD</span></div>
                  </div>
              </v-avatar>
            </v-toolbar>
            <v-card-title class="grey--text caption">{{shoe.id}}</v-card-title>
            <v-card-title class="grey--text text-grey-darken-1 caption mt-n6">{{shoe.date}}</v-card-title>
            <v-card-text class="white--text text-grey-darken-1 mt-n2">{{shoe.marque}}</v-card-text>
            <v-card-text class="mt-n4">
              <v-chip-group active-class="deep-purple accent-4 white--text" column>
                  <v-chip label dark>{{shoe.pay1}}</v-chip>
                   <v-chip label dark>{{shoe.pay2}}</v-chip>
                  <v-spacer></v-spacer>
                  <v-avatar size="40">
                    <v-img :src="shoe.avatar"></v-img>
                  </v-avatar>
              </v-chip-group>
            </v-card-text>
          </v-card>
        </v-col>
      </v-row>
     <v-toolbar flat color="transparent" class="mt-n4">
       <v-divider vertical color="orange" inset></v-divider>
       <v-toolbar-title class="white--text ml-4">Recent Order</v-toolbar-title>
       <v-spacer></v-spacer>
       <v-chip class="ma-1 d-none d-sm-flex" label text-color="white" dark>
         <v-avatar color="white" rounded class="mr-2">
           <v-img src="../assets/3.jpg"></v-img>
         </v-avatar>
         Nike new
       </v-chip>
       <v-chip class="ma-1 d-none d-sm-flex" label text-color="white" dark>
         <v-avatar color="white" rounded class="mr-2">
           <v-img src="../assets/4.jpg"></v-img>
         </v-avatar>
         Zoom Jo
       </v-chip>
       <v-chip class="ma-1 d-none d-sm-flex" label text-color="white" dark>
         <v-avatar color="white" rounded class="mr-2">
           <v-img src="../assets/5.jpg"></v-img>
         </v-avatar>
         Air proce
       </v-chip>
       <v-spacer></v-spacer>
       <v-btn dark class="mr-2 withoutupercase d-done s-sm-flex">
         See all (129)
       </v-btn>
       <v-btn dark class="mr-2" outlined>
         <v-icon left>mdi-chevron-left</v-icon>
         <v-icon right>mdi-chevron-right</v-icon>
       </v-btn>
     </v-toolbar>
     <v-row class="mt-n10">
        <v-col cols="12" xs="12" md="6" lg="3" v-for="(order,i) in orders" :key="i">
          <v-card class="mx-auto my-12 rounded-lg" max-width="374" color="#151515">
         <v-toolbar color="transparent" class="mt-n6" flat>
              <v-avatar color="white" rounded class="mr-2">
                <v-img :src="order.pic" contain></v-img>
              </v-avatar>
              <v-spacer></v-spacer>
              <v-avatar color="black" rounded class="mr-2" dark>
                <div class="three">
                  <div class="four">
                    <span class="white--text caption">{{order.price}}</span>
                  </div>
                  <div class="six">
                      <span class="orange--text caption">HOLD</span>
                  </div>
                </div>
              </v-avatar>
            </v-toolbar>
          </v-card>
        </v-col>
     </v-row>
    </v-container>
  </v-app>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import SideBar from '@/components/SideBar.vue'
import RightSideBar from '@/components/RightSideBar.vue'

export default {
  name: 'Home',
  data:()=>({
    selection:1,
    drawer:true,
    shoes:[
      {
        image:'https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/cdbef2fe-0b58-4aa6-a3cf-74981d56d101/dunk-hi-retro-%E7%94%B7%E5%AD%90%E8%BF%90%E5%8A%A8%E9%9E%8B-KrKBlF.png',
        pic:'https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/uirypqqxq83mwcjbf9ej/air-monarch-4-%E7%94%B7%E5%AD%90%E8%AE%AD%E7%BB%83%E9%9E%8B-h2pQj8.png',
        price:'¥649',
        id:' KD1399-108',
        date:'02.18.2021, 3:34AM',
        marque:'Nike More Uptempo',
        pay1:'LUXEMANE',
        pay2:'ITALY',
        avatar:'https://tse4-mm.cn.bing.net/th/id/OIP-C.wCHjR3fdzRp95TpntJCYeQAAAA?w=179&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7'
      },
      {
        image:'https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/c9fff569-410e-465d-a1a3-2b215cc6f57b/court-vision-lo-%E7%94%B7%E5%AD%90%E8%BF%90%E5%8A%A8%E9%9E%8B-GKBw1J.png',
        pic:'https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/4e93d193-e600-4280-a28c-baf31511417d/air-more-uptempo-%E5%A5%B3%E5%AD%90%E8%BF%90%E5%8A%A8%E9%9E%8B-9WQH13.png',
        price:'¥749',
        id:' DD1399-107:',
        date:'02.12.2021, 3:34AM',
        marque:'Nike Dunk HI Retro',
        pay1:'FULLTER',
        pay2:'WAR',
        avatar:'https://tse2-mm.cn.bing.net/th/id/OIP-C.YPIQgoHSEVA2vVsgBSVpiQAAAA?w=180&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7'
      },
       {
        image:'https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/zjrheo7cjgrv6opt8txu/air-force-1-07-wb-%E8%80%90%E5%85%8B%E7%A9%BA%E5%86%9B%E4%B8%80%E5%8F%B7%E7%94%B7%E5%AD%90%E8%BF%90%E5%8A%A8%E9%9E%8B-DHQ741.png',
        pic:'https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/29e25f4a-693a-4d2e-9d16-fa042fe0838b/air-force-1-07-lv8-%E7%94%B7%E5%AD%90%E8%BF%90%E5%8A%A8%E9%9E%8B-0LsSW1.png',
        price:'¥799',
        id:' DD1399-107:',
        date:'05.12.2021, 3:34AM',
        marque:'Nike Air Force',
        pay1:'LOMDON',
        pay2:'ALSOFWD',
        avatar:'https://tse2-mm.cn.bing.net/th/id/OIP-C.3uauopB6CqPPeUBk80G6UwAAAA?w=221&h=220&c=7&r=0&o=5&dpr=1.25&pid=1.7'
      },
       {
        image:'https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/d9c0e04b-12f4-4098-aa75-62660c4af8c7/air-jordan-6-retro-%E5%A4%8D%E5%88%BB%E7%94%B7%E5%AD%90%E8%BF%90%E5%8A%A8%E9%9E%8B-xqkTR7.png',
        pic:'https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/16daa42d-92e3-44d1-a2c4-b175431af49b/air-jordan-1-element-%E7%94%B7%E5%AD%90%E8%BF%90%E5%8A%A8%E9%9E%8B-jbsXL5.png',
        price:'¥889',
        id:' VS1394-10784',
        date:'02.12.2021, 3:34AM',
        marque:'Nike Dunk HI Retro',
        pay1:'SRELDSKF',
        pay2:'PALAU',
        avatar:'https://tse2-mm.cn.bing.net/th/id/OIP-C.kN9bLBsCwPm3M55X54qdnQAAAA?w=152&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7'
      }
    ],
    orders:[
      {
        pic:'https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/7a9a9471-57e6-422e-9126-1097d6ae73fd/air-force-1-07-60-%E5%A5%B3%E5%AD%90%E8%BF%90%E5%8A%A8%E9%9E%8B-mQFSHl.png',
        price:'￥745'
      },
      {
        pic:'https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/fee3c93f-d3f3-4927-b086-ae51eedda9ab/air-jordan-3-retro-%E5%A4%8D%E5%88%BB%E7%94%B7%E5%AD%90%E8%BF%90%E5%8A%A8%E9%9E%8B-KGDCqj.png',
        price:'￥1399'
      },
      {
        pic:'https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/becab89b-0779-4771-bca4-eb469d2c2b59/sb-dunk-high-pro-%E7%94%B7-%E5%A5%B3%E6%BB%91%E6%9D%BF%E9%9E%8B-dQp5NF.png',
        price:'￥899'
      },
      {
        pic:'https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/sspqsike1oxaclvxofdk/court-borough-low-2-%E5%A4%A7%E7%AB%A5%E8%BF%90%E5%8A%A8%E7%AB%A5%E9%9E%8B-CJTSH3.png',
        price:'￥399'
      }
    ],
  }),
  components: {
    HelloWorld,
     SideBar,
     RightSideBar
  }
}
</script>

<style scoped>
.v-tab.withoutupercase{
  text-transform: none !important;
}
.v-tabs{
  width: 50% !important;
}

.v-btn.withoutupercase{
   text-transform: none !important;
}
.three{
  width: 50px;
  height: 50px;
}
.four{
  width: 50px;
  height: 25px;
  background: black;
}

.five{
  width: 50px;
  height: 25px;
  background: #042a0f;
}
</style>
